<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" type="text/css" href="styles.css" />
        
        <script type="text/javascript" src="../src/TinyC5Utils-0.7.js"></script>
        <script type="text/javascript" src="../src/TinyC5-0.7.js"></script>
        <script type="text/javascript" src="Assets.js?07"></script>
        <script type="text/javascript">
            /**
             * Example04 - Plane deformation
             * 
             * Original example and texture by luis.net
             * http://www.luis.net/
             */
            function Example04() 
            {
                // Var declaration
                var texture, width, height, lookupTable, frameCount = 0, textureImageData;
                
                // Fill the lookupTable with some values
                var _createLookupTable = function() {
                    // increment placeholder
                    var k = 0;
                    
                    // u and v are euclidean coordinates 
                    var u, v;

                    // Loop over image
                    for( var j=0; j < height; j++ )
                    {
                        var y = -1.00 + 2.00*j/height;
                        for( var i=0; i < width; i++ )
                        {
                            var x = -1.00 + 2.00*i/width;
                            var d = Math.sqrt( x*x + y*y );
                            var a = Math.atan2( y, x );
                            var r = d;

                             u = 0.5*(a)/Math.PI;
                             v = Math.sin(2*r);
                            
                            lookupTable[k++] = Math.floor( width*u & width-1 );
                            lookupTable[k++] = Math.floor( height*v & height-1 );                            
                        }
                    }
                };
                
                // Self reference
                var self = this;
                
                // Load texture from base64 encoded data
                var tinyC5 = new TinyC5();
                texture = new Image();
                texture.src = tinyC5.isMobile() ? Assets.texture128 : Assets.texture256;
                texture.onload = function(e) { self.run(); };

                /**
                 * Do rest of initialization and start the show
                 */
                this.run = function() {

                    // Setting dimensions
                    width = texture.width;
                    height= texture.height;
                    
                    // Setup lookuptable
                    lookupTable =  new Array( 2 * width * height );                    
                    _createLookupTable();                    
                    
                    // Setup tinyC5 instance
                    var args = {
                        width: width, 
                        height: height, 
                        scale: 2, 
                        supportMobile: true,
                        container: document.getElementById( 'tinyC5_container' ), 
                        title: 'Plane Deformation - TinyC5 Example #04' 
                    };
                    
                    tinyC5.init( args );
                    
                    // Get textureImageData using handy Utils function of TinyC5 while skipping alpha channel
                    textureImageData = TinyC5Utils.getImagedataFromImage( texture, true );

                    // Perform effect
                    tinyC5.update = function()
                    {
                        // Declaring vars and setting local references for faster access
                        var timeDisplacement = frameCount, o, u, v, cpyIndex, pixelCountDest;
                        var p = tinyC5.pixels;
                        var l = textureImageData;
                        var len = tinyC5.pixels.length/4;
                        
                        // Loop over pixels
                        for (var pixelCount = 0; pixelCount < len; pixelCount++ )
                        {
                            // Get lookup coordinates
                            o = (pixelCount << 1);
                            u = lookupTable[o+0] + timeDisplacement;    // to look like its animating, add timeDisplacement
                            v = lookupTable[o+1] + timeDisplacement;
                            
                            // Copy pixels
                            cpyIndex = ( width * ( v & height-1) + (u & width-1) );
                            cpyIndex = ( cpyIndex << 1) + cpyIndex;
                            pixelCountDest = pixelCount << 2;
                            p[ pixelCountDest ] = l[ cpyIndex ];
                            p[ pixelCountDest + 1] = l[ cpyIndex+1 ];
                            p[ pixelCountDest + 2 ] = l[ cpyIndex+2 ];
                        }
                        
                        // Increase timeDisplacement modifier
                        frameCount++;
                        
                        // Free
                        delete p;
                        delete l;
                    }
                    
                    // Get the canvas object
                    var canvas = tinyC5.getCanvas();
                    canvas.addEventListener( tinyC5.FAST_CLICK_EVENT, function(e) { 
                        tinyC5.setFullscreen( !tinyC5.isFullscreen() );
                    } );                    
                    
                    // Start the show
                    tinyC5.start();                    
                }
            }
        </script>
    </head>
    <body onload="new Example04();">
        <div id="container">
            <div id="tinyC5_container">
            </div>
        </div>
        <div id="footer">
            Plane Deformation. Original code and texture by <a href="http://www.luis.net/">luis.net</a> | Created with <a href="http://www.dbfinteractive.com/forum/index.php?topic=5397.0">TinyC5</a>
        </div>        
    </body>
</html>